<template>
    <div>
        <h3>新闻列表</h3>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="news in newslist" :key="news.id">
					<router-link :to="'/news/newsinfo/'+news.id" class="">
						<img class="mui-media-object mui-pull-left" :src="news.img_url">
						<div class="mui-media-body">
							<h4>{{news.title}}</h4> 
							<p class="mui-ellipsis">
                                <span>发表时间：{{news.add_time|dateFormat}}</span>
                                <span>点击：{{news.click}}次</span>
                            </p>
						</div>
					</router-link >
				</li>
			

			</ul>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data () {
        return {
            newslist:[]
        }
    },
    methods:{
        getNewsList(){
            this.$http.get('api/getnewslist').then(res=>{
                console.log(res);
                
                if (res.body.status===0) {
                    // 成功
                   Toast({
                        message: '调用接口成功',
                        position: 'middle',
                        duration: 3000
                    });
                    this.newslist=res.body.message;
                   console.log(this.newslist);
                   
                    
                } else {
                     //   失败
                    Toast({
                        message: '调用接口失败',
                        position: 'middle',
                        duration: 5000
                    });
                }
            })
        }
    },
    created(){
        this.getNewsList()
    }
}
</script>
<style lang="scss" scoped>
 .mui-table-view{
     li{
         h4{
             font-size:14px;
         }
         .mui-ellipsis{
             font-size: 12px;
             color: #226aff;
             display: flex;
             justify-content:space-between;
         }
     }
 }
</style>
